<template>
  <div>
    <a-list
      itemLayout="vertical"
      bordered
      v-if="cardList.length > 0"
      :dataSource="cardList"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <a-list-item-meta :description="item.bank_num">
          <span slot="title">{{ item.bank_name }}</span>
          <img
            class="bankImg"
            slot="avatar"
            :src="getImg(item.bank_name)"
            alt=""
          />
        </a-list-item-meta>
      </a-list-item>
    </a-list>
    <div v-else class="empty-wrapper">
      <img src="@/assets/image/empty.png" alt="" />
    </div>
  </div>
</template>

<script>
import bankList from "@/lib/bank.js";
export default {
  name: "index",
  data() {
    return {
      bankList: bankList,
      cardList: []
    };
  },
  methods: {
    getImg(name) {
      let value = this.bankList.find(value => {
        if (value.name === name) {
          return value;
        }
      });
      if (!value) {
        return require("@/assets/bankImg/yinhang.png");
      } else {
        return value.img;
      }
    },
    getCardList() {
      this.$ajax
        .post(this.$api.getCardList)
        .then(res => {
          this.cardList = res.data;
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  created() {
    this.getCardList();
  }
};
</script>

<style scoped lang="less">
.bankImg {
  width: 50px;
}
.empty-wrapper {
  margin-top: 5rem;
  text-align: center;
}
</style>
